<template>
  <div>
    <el-col :span="14">
      <div class="nav">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>所有用户信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-col>
    <el-col :span="4">
      <el-col :span="20">
        <el-date-picker type="month" placeholder="购保月份" v-model="date" @change="mouth()" style="width: 100%">
        </el-date-picker>
      </el-col>
      <el-col>
        <el-checkbox v-model="scYear" @change="checkedscYear">当年审车</el-checkbox>
      </el-col>
    </el-col>
    <el-col :span="6">
      <div class="search">
        <el-col :span="18">
          <el-tooltip class="item" effect="dark" content="可搜索姓名，联系电话，地址，购车年份" placement="bottom">
            <el-input v-model="search" placeholder="请输入搜索内容" class="input" clearable @keyup.enter.native="searchinfo()"
              @change="change()"></el-input>
          </el-tooltip>
        </el-col>
        <el-button icon="el-icon-search" circle @click="searchinfo()" class="btn"></el-button>
      </div>
    </el-col>
    <!-- 所有用户信息 -->
    <template>
      <el-table :data="curtableData" style="width: 100%" v-loading="loading" stripe>
        <el-table-column prop="username" label="姓名" width="100" fixed show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="call" label="联系电话" width="140">
        </el-table-column>
        <el-table-column label="购保时间" width="140">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date_sc" label="首次审车时间" width="140">
        </el-table-column>
        <el-table-column prop="nextSc" label="下次审车时间" width="140">
        </el-table-column>
        <el-table-column prop="address" label="详细地址" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="购车日期" width="140">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.date1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="保险" prop="bx_true" width="180px">
          <template slot-scope="scope">
            <el-switch style="display: block" v-model="scope.row.bx_true" active-color="#13ce66"
              inactive-color="#ff4949" active-text="已购" inactive-text="未购" disabled>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="审车" prop="sc_true" width="180px">
          <template slot-scope="scope">
            <el-switch style="display: block" v-model="scope.row.sc_true" active-color="#13ce66"
              inactive-color="#ff4949" active-text="已审" inactive-text="未审" disabled>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260px">
          <template slot-scope="scope">
            <router-link :to="{
              path: '/userinfo/details',
              query: {
                id: scope.row._id,
              },
            }">
              <el-button size="mini" type="primary" @click="details(scope.$index, scope.row)">更多/编辑</el-button>
            </router-link>

            <el-popconfirm title="确定删除？" icon="el-icon-info" icon-color="red"
              @confirm="handleDelete(scope.$index, scope.row)">
              <el-button size="mini" slot="reference" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination background :page-size="pageSize" :current-page="curPage" layout="prev, pager, next"
          :total="total" @current-change="currentChange"></el-pagination>
      </div>
      <!-- 分页 -->
    </template>
  </div>
</template>
    <!-- alluserinfo end -->
<script>
import moment from "moment";
import unit from "../../../unit/unit.js";
export default {
  name: "alluser",
  data() {
    return {
      time: moment().format("YYYY"),
      dialogimg: false,
      dialogeditimg: false,
      dialogVisible: false,
      dialogImageUrl: "",
      srcList: [],
      date: "",
      search: "",
      loading: true,
      curPage: 1,
      pageSize: 15,
      tableData: [],
      tmp_tableData: [],
      dialogFormVisible: false,
      form: {},
      formLabelWidth: "120px",
      img_: "",
      show_: "none",
      edit: null,
      TmpDate1: "",
      scYear: false,
      jisu: 1,
      // LoginInfo: JSON.parse(localStorage.isLogin).phone,
    };
  },

  // 获取用户信息
  created() {
    // 获取文件IP地址
    this.$axios.get("/api/ip").then((res) => {
      if (res.data.status == -1) {
        this.$message({
          message: "配置文件丢失!",
          type: "error",
        });
      } else {
        unit.setCookie("url", res.data.data);
      }
    });
    this.date = unit.getCookie("mouth");
    this.curPage = unit.getCookie("pages")
      ? Number(unit.getCookie("pages"))
      : 1;
    let page = localStorage.getItem("page");
    if (page == 1) {
      this.$router.go(0);
      localStorage.removeItem("page");
    }
    let id = "LXuao";
    let LoginInfo = JSON.parse(localStorage.isLogin).UAdminPhone;
    this.$axios({
      method: "POST",
      url: "/api/getAlluser",
      data: {
        id: id,
        LoginInfo: LoginInfo,
      },
    }).then((res) => {
      // console.log(res);
      // if(unit.getCookie("select"))
      // this.tableData = res.data.data;
      // return
      this.tableData = unit.sort_(res.data.data);
      // this.tableData = res.data.data;
      // console.log(this.tableData)
      let num_ = 0;
      this.tableData.forEach((e, i) => {
        // console.log(e.date)
        this.tableData[i].bx_true =
          this.tableData[i].bx_true == "true" ||
            this.tableData[i].bx_true == true
            ? true
            : false;
        this.tableData[i].sc_true =
          this.tableData[i].sc_true == "true" ||
            this.tableData[i].sc_true == true
            ? true
            : false;
        this.tableData[i].date1 = e.date1;
        if (this.tableData[i].date != null) {
          this.tableData[i].date = e.date.slice(5, 10).replace("/", "-");
        }
        if (this.tableData[i].date_sc != null) {
          // 判断几年
          let diff = this.time - e.date_sc.slice(0, 4) + 2;
          let temp = Number(e.date_sc.slice(0, 4)) - 2;
          // console.log(temp == -2)
          if (diff <= 4 || diff === 7 || diff === 8) {
            // console.log(diff)
            switch (diff) {
              case 0:
              case 1:
                temp += 2;
                break;
              case 2:
                temp += 2;
                break;
              case 3:
              case 4:
                temp += 4;
                break;
              case 7:
                temp += 7;
                break;
              case 8:
                temp += 8;
                break;
              default: break;
            }
            e.nextSc = temp + e.date_sc.slice(4, 12).replace(/\//g, "-");
            if (this.time == temp) {
              num_ = num_ + 1;
              if (e.sc_true == true || e.sc_true == "true") {
                num_ -= 1;
              }
              e.nextSc = (
                <span style="color:orange">
                  {temp}
                  {e.date_sc.slice(4, 12).replace(/\//g, "-")}
                </span>
              );
            }
          } else if (diff > 4 && diff <= 13) {
            num_ = num_ + 1;
            if (e.sc_true == true || e.sc_true == "true") {
              num_ -= 1;
            }
            e.nextSc = (
              <span style="color:red">
                {this.time}
                {e.date_sc.slice(4, 12).replace(/\//g, "-")}
              </span>
            );
          } else if (diff > 13 && diff != Number(this.time) && temp != -2) {
            e.nextSc = <span style="color:blue">该车已强制报废！</span>;
          }
          this.tableData[i].date_sc = e.date_sc
            .slice(0, 10)
            .replace(/\//g, "-");
          this.tableData[i].date1 = e.date1.slice(0, 10).replace(/\//g, "-");
        }
        //判断几年
      });
      this.tmp_tableData = this.tableData;
      function sortDay(a, b) {
        let c = ("2022/" + a.date).replace("-", "/");
        let d = ("2022/" + b.date).replace("-", "/");
        return Date.parse(c) - Date.parse(d);
        // return 0
      }
      if (unit.getCookie("selectdate")) {
        this.tableData = [];
        this.curPage = 1;
        let tmpT = res.data.data;
        tmpT.forEach((e, i) => {
          if (unit.getCookie("selectdate") == Number(tmpT[i].code)) {
            this.tableData.push(e);
          }
        });
        this.tableData.sort(sortDay);
      }
      // 审车提示
      setTimeout(() => {
        if (num_ != 0) {
          this.$notify({
            title: "提示",
            message: "本年有" + num_ + "位车主需要审车！",
            type: "info",
          });
        }
      }, 1500);
      setTimeout(() => {
        this.loading = false;
      }, 500);
    });
    // 保险提示
    setTimeout(() => {
      let num = 0;
      let date = new Date();
      // console.log(date.getMonth() + 1);
      this.tableData.forEach((e, i) => {
        if (parseInt(this.tableData[i].code) == date.getMonth() + 1) {
          num = num + 1;
          if (e.bx_true == true || e.bx_true == "true") {
            num -= 1;
          }
        }
      });
      if (num != 0) {
        this.$notify({
          title: "提示",
          message: "本月有" + num + "位车主需要购买保险！",
          type: "info",
        });
      }
    }, 1000);
  },
  computed: {
    total(i, row) {
      return this.tableData.length;
    },
    curtableData() {
      const curPage = this.curPage;
      const pageSize = this.pageSize;
      return this.tableData.slice((curPage - 1) * pageSize, pageSize * curPage);
    },
  },

  methods: {
    changeStatus(callback) {
      // console.log(callback);
      callback == true ? (this.show_ = "") : (this.show_ = "none");
    },
    currentChange(val) {
      this.curPage = val;
    },
    handleDelete(index, row) {
      // console.log(row);
      let tmpImg = row.img != undefined ? row.img.replace("\\", "/") : null;
      let tmpImg_xszfm =
        row.img_xszfm != undefined ? row.img_xszfm.replace("\\", "/") : null;
      let tmpImg_qs =
        row.img_qs != undefined ? row.img_qs.replace("\\", "/") : null;
      let tmpImg_new =
        row.img_new != undefined ? row.img_new.replace("\\", "/") : null;
      let tmpImg_jsz =
        row.img_jsz != undefined ? row.img_jsz.replace("\\", "/") : null;

      // console.log(tmpImg);
      this.$axios({
        method: "POST",
        url: "/api/deluser",
        data: {
          id: row._id,
          imgurl: tmpImg,
          img_fm: tmpImg_xszfm,
          img_qs: tmpImg_qs,
          img_new: tmpImg_new,
          img_jsz: tmpImg_jsz,
          LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone
        },
      }).then((res) => {
        // console.log(res);
        if (res.data.status === 1) {
          this.$message({
            message: "删除成功!",
            type: "success",
          });
          let id = "LXuao";
          this.$axios({
            method: "POST",
            url: "/api/getAlluser",
            data: {
              id: id,
              LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone,
            },
          }).then((res) => {
            this.tableData = res.data.data;
            this.tableData = unit.sort_(this.tableData);
            this.tableData.forEach((e, i) => {
              this.tableData[i].bx_true =
                this.tableData[i].bx_true == "true" ||
                  this.tableData[i].bx_true == true
                  ? true
                  : false;
              this.tableData[i].sc_true =
                this.tableData[i].sc_true == "true" ||
                  this.tableData[i].sc_true == true
                  ? true
                  : false;
              if (this.tableData[i].date != null) {
                this.tableData[i].date = e.date.slice(5, 10).replace("/", "-");
              }
              if (this.tableData[i].date_sc != null) {
                // 判断几年
                let diff = this.time - e.date_sc.slice(0, 4) + 2;
                let temp = Number(e.date_sc.slice(0, 4)) - 2;

                if (diff <= 4 || diff === 7 || diff === 8) {
                  // console.log(diff)
                  switch (diff) {
                    case 0:
                    case 1:
                      temp += 2;
                      break;
                    case 2:
                      temp += 2;
                      break;
                    case 3:
                    case 4:
                      temp += 4;
                      break;
                    case 7:
                      temp += 7;
                      break;
                    case 8:
                      temp += 8;
                      break;
                    default: break;
                  }
                  e.nextSc = temp + e.date_sc.slice(4, 12).replace(/\//g, "-");
                  if (this.time == temp) {
                    e.nextSc = (
                      <span style="color:orange">
                        {temp}
                        {e.date_sc.slice(4, 12).replace(/\//g, "-")}
                      </span>
                    );
                  }
                } else if (diff > 4 && diff <= 13) {
                  e.nextSc = (
                    <span style="color:red">
                      {this.time}
                      {e.date_sc.slice(4, 12).replace(/\//g, "-")}
                    </span>
                  );
                } else if (diff > 13 && diff != Number(this.time) && temp != -2) {
                  e.nextSc = <span style="color:blue">该车已强制报废！</span>;
                }
                this.tableData[i].date_sc = e.date_sc
                  .slice(0, 10)
                  .replace(/\//g, "-");
                this.tableData[i].date1 = e.date1
                  .slice(0, 10)
                  .replace(/\//g, "-");
              }
              //判断几年
            });
          });
        }
      });
    },

    // 搜索
    searchinfo() {
      this.scYear = false;
      this.search = this.search.replace(/(^\s*)|(\s*$)/g, "");
      this.$axios({
        method: "POST",
        url: "/api/Search",
        data: {
          info: this.search,
          LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone,
        },
      }).then((res) => {
        // console.log(res.data)
        this.curPage = 1;
        this.tableData = res.data.data;
        this.tableData = unit.sort_(this.tableData);
        this.tableData.forEach((e, i) => {
          this.tableData[i].bx_true =
            this.tableData[i].bx_true == "true" ||
              this.tableData[i].bx_true == true
              ? true
              : false;
          this.tableData[i].sc_true =
            this.tableData[i].sc_true == "true" ||
              this.tableData[i].sc_true == true
              ? true
              : false;
          if (this.tableData[i].date != null) {
            this.tableData[i].date = e.date.slice(5, 10).replace("/", "-");
          }
          if (this.tableData[i].date_sc != null) {
            // 判断几年
            let diff = this.time - e.date_sc.slice(0, 4) + 2;
            let temp = Number(e.date_sc.slice(0, 4)) - 2;
            if (diff <= 4 || diff === 7 || diff === 8) {
              // console.log(diff)
              switch (diff) {
                case 0:
                case 1:
                  temp += 2;
                  break;
                case 2:
                  temp += 2;
                  break;
                case 3:
                case 4:
                  temp += 4;
                  break;
                case 7:
                  temp += 7;
                  break;
                case 8:
                  temp += 8;
                  break;
                default: break;
              }
              e.nextSc = temp + e.date_sc.slice(4, 12).replace(/\//g, "-");
              if (this.time == temp) {
                e.nextSc = (
                  <span style="color:orange">
                    {temp}
                    {e.date_sc.slice(4, 12).replace(/\//g, "-")}
                  </span>
                );
              }
            } else if (diff > 4 && diff <= 13) {
              e.nextSc = (
                <span style="color:red">
                  {this.time}
                  {e.date_sc.slice(4, 12).replace(/\//g, "-")}
                </span>
              );
            } else if (diff > 13 && diff != Number(this.time) && temp != -2) {
              e.nextSc = <span style="color:blue">该车已强制报废！</span>;
            }
            this.tableData[i].date_sc = e.date_sc
              .slice(0, 10)
              .replace(/\//g, "-");
            this.tableData[i].date1 = e.date1.slice(0, 10).replace(/\//g, "-");
          }
          //判断几年
        });
      });
    },
    // 当年审车
    checkedscYear() {
      // 清空cookie
      this.search = "";
      this.date = "";
      this.curPage = 1;
      unit.setCookie("mouth", "");
      unit.setCookie("pages", "");
      this.tableData = this.tmp_tableData;
      if (this.scYear) {
        let tmp = [];
        this.tableData.forEach((e, i) => {
          if (e.nextSc != undefined) {
            if (e.nextSc instanceof Object) {
              if (e.nextSc.data.attrs == undefined) {
                tmp.push(e);
              }
            }
          }
        });
        this.tableData = tmp;
      } else {
        this.tableData = this.tmp_tableData;
      }

      this.tableData = unit.sort_(this.tableData);
    },
    mouth() {
      this.scYear = false;
      if (this.date) {
        unit.setCookie("mouth", this.date);
        let date_ = this.date.toLocaleDateString();
        let temp = date_.slice(5, 7).replace("/", "");
        unit.setCookie("selectdate", temp);
        this.$axios({
          method: "POST",
          url: "/api/findbx",
          data: {
            date: temp,
            LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone,
          },
        }).then((res) => {
          this.curPage = 1;
          this.tableData = res.data.data;
          this.tableData = unit.sort_(this.tableData);
          this.tableData.forEach((e, i) => {
            this.tableData[i].bx_true =
              this.tableData[i].bx_true == "true" ||
                this.tableData[i].bx_true == true
                ? true
                : false;
            this.tableData[i].sc_true =
              this.tableData[i].sc_true == "true" ||
                this.tableData[i].sc_true == true
                ? true
                : false;
            this.tableData[i].date1 = e.date1;
            if (this.tableData[i].date != null) {
              this.tableData[i].date = e.date.slice(5, 10).replace("/", "-");
            }
            if (this.tableData[i].date_sc != null) {
              // 判断几年
              let diff = this.time - e.date_sc.slice(0, 4) + 2;
              let temp = Number(e.date_sc.slice(0, 4)) - 2;
              if (diff <= 4 || diff === 7 || diff === 8) {
                // console.log(diff)
                switch (diff) {
                  case 0:
                  case 1:
                    temp += 2;
                    break;
                  case 2:
                    temp += 2;
                    break;
                  case 3:
                  case 4:
                    temp += 4;
                    break;
                  case 7:
                    temp += 7;
                    break;
                  case 8:
                    temp += 8;
                    break;
                  default: break;
                }
                e.nextSc = temp + e.date_sc.slice(4, 12).replace(/\//g, "-");
                if (this.time == temp) {
                  e.nextSc = (
                    <span style="color:orange">
                      {temp}
                      {e.date_sc.slice(4, 12).replace(/\//g, "-")}
                    </span>
                  );
                }
              } else if (diff > 4 && diff <= 13) {
                e.nextSc = (
                  <span style="color:red">
                    {this.time}
                    {e.date_sc.slice(4, 12).replace(/\//g, "-")}
                  </span>
                );
              } else if (diff > 13 && diff != Number(this.time) && temp != -2) {
                e.nextSc = <span style="color:blue">该车已强制报废！</span>;
              }
              this.tableData[i].date_sc = e.date_sc
                .slice(0, 10)
                .replace(/\//g, "-");
              this.tableData[i].date1 = e.date1
                .slice(0, 10)
                .replace(/\//g, "-");
            }
            //判断几年
          });
        });
      } else if (!this.date) {
        document.cookie = "selectdate=" + "";
        document.cookie = "mouth=" + "";
        this.curPage = 1;
        this.$axios({
          method: "POST",
          url: "/api/getAlluser",
          data: {
            LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone,
          },
        }).then((res) => {
          this.tableData = this.tmp_tableData;
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        });
      }
    },
    // 清空搜索框
    change() {
      // 清空
      this.date = "";
      unit.setCookie("mouth", "");
      unit.setCookie("pages", "");
      unit.setCookie("selectdate", "");
      // 清空
      if (this.search == "") {
        this.tableData = this.tmp_tableData;
      }
    },

    // 用户详细信息
    details(i, row) {
      unit.setCookie("pages", this.curPage);
    },
    handleRemove(file, fileList) { },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    imgChange(file, fileList) {
      this.edit = file.raw;
      // console.log(this.form);
      // console.log(this.resetForm);
    },
  },
  components: {},
};
</script>
<style scoped>
.el-popper[x-placement^="bottom"] {
  margin-top: -39px;
  left: 800px !important;
}
</style>